<template>
  <div class="export-btn" @click="exportData">
    <img src="../../assets/img/export.png" alt="">
    <span>导出</span>
  </div>
</template>

<style scoped>
</style>

<script>
export default {
  name: "exportBtn",
  props: {
    form: Object,
    url: String
  },
  methods: {
    // 导出
    exportData() {
      this.$axios({
        method: "post",
        url: this.url,
        data: this.form,
        responseType: "blob"
      })
        .then(res => {
          this.download(res);
        })
        .catch(error => {
          this.$message({
            message: "导出失败",
            type: "error"
          });
        });
    },
    download(res) {
      if (!res) {
        return;
      }
      let bob = new Blob([res.data]);
      let fileName = res.headers["content-disposition"].split("=")[1];
      fileName = decodeURI(fileName);
      let url = window.URL.createObjectURL(bob);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
    }
  }
};
</script>
